<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first blog-旅行日志</title>
    <link rel="stylesheet" href="css/travel.css">
    <script type="text/javascript" src="../first-ui/components/Header/first-header-a.js"></script>
    <script type="text/javascript" src="./../first-ui/components/Footer/index.js"></script>
</head>

<body>
    <first-header-a></first-header-a>
    <body>
        <!-- 顶部标题区域 -->
        <header>
            <div class="header-banner">
                <h1>每一张照片都是一次美好的记忆</h1>
            </div>
        </header>

        <!-- 内容主体 -->
        <main>
            <main>
                <h2>旅行日志</h2>
                <div class="gallery">
                    <!-- 平江路 -->
                    <div class="card" onclick="switchLocation('平江路')">
                        <img src="images/平江路.jpg" alt="平江路">
                        <p><strong>平江路</strong></p>
                        <p class="date">2024-07-17</p>
                        <p class="description">平江路是苏州古城的一条历史街区，沿河而建，保存了大量明清时期的建筑，充满了江南水乡的韵味。</p>
                    </div>
                    <!-- 寒山寺 -->
                    <div class="card" onclick="switchLocation('寒山寺')">
                        <img src="images/寒山寺.jpeg" alt="寒山寺">
                        <p><strong>寒山寺</strong></p>
                        <p class="date">2024-07-18</p>
                        <p class="description">寒山寺是一座有着悠久历史的佛教寺庙，以唐代诗人张继的《枫桥夜泊》闻名遐迩。</p>
                    </div>
                    <!-- 拙政园 -->
                    <div class="card" onclick="switchLocation('拙政园')">
                        <img src="images/园林.jpeg" alt="拙政园">
                        <p><strong>拙政园</strong></p>
                        <p class="date">2024-07-19</p>
                        <p class="description">拙政园是中国四大名园之一，也是苏州园林的经典代表，以其典雅的设计和自然的景观闻名。</p>
                    </div>
                    <!-- 山塘街 -->
                    <div class="card" onclick="switchLocation('山塘街')">
                        <img src="images/山塘街.jpeg" alt="山塘街">
                        <p><strong>山塘街</strong></p>
                        <p class="date">2024-07-20</p>
                        <p class="description">山塘街是苏州一条有着千年历史的古街，保留了大量传统商铺和桥梁，展现了苏州的传统文化。</p>
                    </div>
                </div>

                <!-- 地图容器 -->
                <h2>地图导航</h2>
                <div id="map"></div>
            </main>
            <first-footer></first-footer>
            <script type="text/javascript"
                src="http://api.map.baidu.com/api?v=3.0&ak=uxUnUVjwGHPlnjiNGYGGiUjW6iuO2OoN"></script>
            <script>
                // 初始化地图
                let map;
                function initMap() {
                    map = new BMap.Map("map"); // 创建地图实例
                    const centerPoint = new BMap.Point(120.622249, 31.319345); // 平江路默认中心点
                    map.centerAndZoom(centerPoint, 15); // 设置中心点和缩放级别
                    map.addControl(new BMap.NavigationControl()); // 添加缩放控件
                    map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
                }

                // 切换位置函数
                function switchLocation(location) {
                    const points = {
                        "平江路": new BMap.Point(120.622249, 31.319345),
                        "寒山寺": new BMap.Point(120.588877, 31.304548),
                        "拙政园": new BMap.Point(120.627236, 31.321558),
                        "山塘街": new BMap.Point(120.605643, 31.316653),
                    };
                    const descriptions = {
                        "平江路": "苏州古城的一条历史街区，充满古韵和江南水乡风情。",
                        "寒山寺": "著名的佛教寺庙，以《枫桥夜泊》闻名。",
                        "拙政园": "中国四大名园之一，苏州园林的经典代表。",
                        "山塘街": "苏州最具历史的商业街区之一，古色古香。",
                    };
                    const point = points[location];
                    if (point) {
                        map.centerAndZoom(point, 15); // 更新地图中心点
                        const marker = new BMap.Marker(point); // 创建标记
                        map.clearOverlays(); // 清除之前的标记
                        map.addOverlay(marker); // 添加新标记
                        const infoWindow = new BMap.InfoWindow(`<strong>${location}</strong><br>${descriptions[location]}`, {
                            width: 250,
                            height: 100,
                            title: "地点信息",
                        }); // 信息窗口
                        marker.addEventListener("click", function () {
                            map.openInfoWindow(infoWindow, point); // 点击标记打开信息窗口
                        });
                    }
                }

                // 页面加载完成后初始化地图
                window.onload = initMap;
                document.querySelectorAll('.card img').forEach(image => {
                    image.addEventListener('click', function () {
                        // 创建一个全屏显示的容器
                        const overlay = document.createElement('div');
                        overlay.style.position = 'fixed';
                        overlay.style.top = '0';
                        overlay.style.left = '0';
                        overlay.style.width = '100%';
                        overlay.style.height = '100%';
                        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
                        overlay.style.zIndex = '9999';
                        overlay.style.display = 'flex';
                        overlay.style.alignItems = 'center';
                        overlay.style.justifyContent = 'center';

                        // 创建放大的图片
                        const img = document.createElement('img');
                        img.src = this.src;
                        img.style.maxWidth = '90%';
                        img.style.maxHeight = '90%';
                        img.style.border = '5px solid white';
                        img.style.borderRadius = '10px';
                        img.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.5)';

                        // 将图片添加到容器
                        overlay.appendChild(img);

                        // 点击容器关闭放大
                        overlay.addEventListener('click', () => {
                            document.body.removeChild(overlay);
                        });

                        // 添加容器到页面
                        document.body.appendChild(overlay);
                    });
                });
            </script>
    </body>

</html>